import 'package:flutter/material.dart';

class WInput extends StatefulWidget {
  @override
  _WInputState createState() => _WInputState();
}

class _WInputState extends State<WInput> {
  String name = "";
  String password = "";
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("输入框组件"),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          SizedBox(
            height: 10,
          ),
          Padding(
            padding: EdgeInsets.all(5),
            child: TextField(
              autofocus: true, //是否自动获取焦点。
              decoration: InputDecoration(
                  labelText: "用户名",
                  hintText: "用户名或邮箱",
                  helperText: "用户名长度为6-10个字母",
                  helperStyle: TextStyle(color: Colors.red, fontSize: 10),
                  prefixIcon: Icon(Icons.person),
                  contentPadding: EdgeInsets.all(10.0),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(15))),
              onChanged: (value) {
                setState(() {
                  name = value;
                });
              },
            ),
          ),
          TextField(
            decoration: InputDecoration(
                labelText: "密码",
                hintText: "您的登录密码",
                helperText: "密码长度最小6位",
                helperStyle: TextStyle(color: Colors.deepOrange),
                prefixIcon: Icon(Icons.lock)),
            obscureText: true, //是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换
            onChanged: (v) {
              setState(() {
                password = v;
              });
            },
          ),
          Text("输入的用户名或邮箱是:${name}"),
          Text("您的登录密码:${password}"),
          Container(
            height: 60,
            width: 250,
            child: TextField(
              decoration: InputDecoration(
                fillColor: Color(0x30cccccc),
                filled: true,
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0x00FF0000)),
                    borderRadius: BorderRadius.all(Radius.circular(100))),
                hintText: 'QQ号/手机号/邮箱',
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0x00000000)),
                    borderRadius: BorderRadius.all(Radius.circular(100))),
              ),
            ),
          )
        ],
      ),
    );
  }
}
